<template>
	<slot :controller="controller" :store="store" :model="model">
		<AppForm
			ref="editForm"
			v-bind="$attrs"
			:id="controlID"
			:name="model.codeName"
			:class="classNames"
			:data="store.data"
		>
			<AppAnchor
				v-if="store.anchorData.length > 0"
				:controlID="controlID"
				:anchorData="store.anchorData"
			/>
			<a-row class="control-content app-control-form__content">
				<slot
					name="MainPage"
					:controller="controller"
					:store="store"
					:model="model"
				>
					<a-tabs class="app-control-form__page">
						<slot
							name="formpage1"
							:controller="controller"
							:store="store"
							:model="model"
						>
							<a-tab-pane
								class="app-control-form__page"
								v-show="store.detailModel.formpage1.visible"
								key="formpage1"
							>
								<template #tab>
									<slot
										name="formpage1Title"
										:controller="controller"
										:store="store"
										:model="model"
									>
										<AppIconText text="基本信息" />
									</slot>
								</template>
								<slot
									name="formpage1Content"
									:controller="controller"
									:store="store"
									:model="model"
								>
									<AppFormPage :layoutOpts="{ selfLayout: 'TABLE_24COL' }">
										<AppCol
											noRoot
											:visible="store.detailModel.group1.visible"
											:layoutOpts="{
												selfLayout: 'TABLE_24COL',
												parentLayout: 'TABLE_24COL',
												colMD: 24,
											}"
										>
											<template #default="{ slotClass, slotStyle }">
												<slot
													name="group1"
													:controller="controller"
													:store="store"
													:model="model"
													:slotClass="slotClass"
													:slotStyle="slotStyle"
													:actions="{ handleComponentAction }"
												>
													<AppFormGroup
														name="group1"
														v-show="store.detailModel.group1.visible"
														:slotClass="slotClass"
														:slotStyle="slotStyle"
														:layoutOpts="{
															selfLayout: 'TABLE_24COL',
															parentLayout: 'TABLE_24COL',
															colMD: 24,
														}"
														:title="
															$t(
																'CONTROL.DEFORM.SYS_PERSON.MAIN.GROUPPANEL.GROUP1',
																'人员基本信息'
															)
														"
														subCaption=""
														:enableAnchor="false"
														:showMoreItems="
															store.detailModel.group1.showMoreItems
														"
														:showMoreMode="
															store.detailModel.group1.showMoreMode
														"
														:infoGroupMode="false"
														:titleBarCloseMode="0"
														:showCaption="true"
														:uIActionGroup="
															store.detailModel.group1.uIActionGroup
														"
														@component-action="(actionParam: any) => { handleComponentAction(controller, actionParam) }"
													>
													</AppFormGroup>
												</slot>
											</template>
										</AppCol>
									</AppFormPage>
								</slot>
							</a-tab-pane>
						</slot>
						<slot
							name="formpage2"
							:controller="controller"
							:store="store"
							:model="model"
						>
							<a-tab-pane
								class="app-control-form__page"
								v-show="store.detailModel.formpage2.visible"
								key="formpage2"
							>
								<template #tab>
									<slot
										name="formpage2Title"
										:controller="controller"
										:store="store"
										:model="model"
									>
										<AppIconText text="其它" />
									</slot>
								</template>
								<slot
									name="formpage2Content"
									:controller="controller"
									:store="store"
									:model="model"
								>
									<AppFormPage :layoutOpts="{ selfLayout: 'TABLE_24COL' }">
										<AppCol
											noRoot
											:visible="store.detailModel.group2.visible"
											:layoutOpts="{
												selfLayout: 'TABLE_24COL',
												parentLayout: 'TABLE_24COL',
												colMD: 24,
											}"
										>
											<template #default="{ slotClass, slotStyle }">
												<slot
													name="group2"
													:controller="controller"
													:store="store"
													:model="model"
													:slotClass="slotClass"
													:slotStyle="slotStyle"
													:actions="{ handleComponentAction }"
												>
													<AppFormGroup
														name="group2"
														v-show="store.detailModel.group2.visible"
														:slotClass="slotClass"
														:slotStyle="slotStyle"
														:layoutOpts="{
															selfLayout: 'TABLE_24COL',
															parentLayout: 'TABLE_24COL',
															colMD: 24,
														}"
														:title="
															$t(
																'CONTROL.DEFORM.SYS_PERSON.MAIN.GROUPPANEL.GROUP2',
																'操作信息'
															)
														"
														subCaption=""
														:enableAnchor="false"
														:showMoreItems="
															store.detailModel.group2.showMoreItems
														"
														:showMoreMode="
															store.detailModel.group2.showMoreMode
														"
														:infoGroupMode="false"
														:titleBarCloseMode="0"
														:showCaption="true"
														:uIActionGroup="
															store.detailModel.group2.uIActionGroup
														"
														@component-action="(actionParam: any) => { handleComponentAction(controller, actionParam) }"
													>
													</AppFormGroup>
												</slot>
											</template>
										</AppCol>
									</AppFormPage>
								</slot>
							</a-tab-pane>
						</slot>
					</a-tabs>
				</slot>
			</a-row>
		</AppForm>
	</slot>
</template>
<script setup lang="ts">
// 基于template/src/widgets/{{appEntities}}/{{ctrls@FORM}}-form/{{spinalCase ctrl.codeName}}-form-base.vue.hbs生成

import { Ref } from 'vue';
import { AppAnchor } from '@components/common/anchor';
import { AppCol } from '@/components/common/col';
import { AppRow } from '@/components/common/row';
import {
	AppForm,
	AppFormPage,
	AppFormGroup,
	AppFormTabPage,
	AppFormItem,
	AppFormButton,
	AppFormDruipart,
	AppFormIframe,
	AppFormRaw,
	AppFormMdCtrl,
	AppFormMdCtrlRepeater,
} from '@components/widgets/form';
import {
	IEvent,
	EditFormActionType,
	IEditFormAbility,
	IEditFormStore,
	IParam,
} from '@/core';
import { useProps, useBasic, useAction, useController } from './main-form-hook';

const editForm: Ref = ref(null);

// 输入参数
const props = defineProps(useProps());

// 基础数据
const {
	controlID,
	getClassNames,
	model,
	useNavParamsBind,
	useEventBind,
	handleActionClick,
	handleComponentAction,
} = useBasic(props);

const emit = defineEmits<{
	(
		event: 'ctrl-action',
		name: string,
		action: EditFormActionType,
		data: IParam[]
	): void;
	(event: 'ctrl-init', name: string, data: IEditFormAbility): void;
	(event: 'ctrl-destroy', name: string, data: IParam): void;
}>();

const evt = useEventBind(emit);
//  部件样式名
const classNames = computed(() => {
	return getClassNames(props);
});

//  表单控制器
const controller = useController(props, evt, { controlID, editForm });

useNavParamsBind(controller, props);

const store: IEditFormStore = controller.getStore();

const ctrlService = controller.getCtrlService();

onMounted(() => {
	controller.ctrlMounted();
});
onUnmounted(() => {
	controller.ctrlDestroy();
});
</script>
